<!-- 这是登录页面的主容器 -->  
<template>  
    <div class="login">  
        <!-- 这是登录页面的猫图片容器 -->  
        <div class="cat">  
            <!-- 这是猫的图片 -->  
            <img class="cat-pic" src="../static/login/小猫.png" >  
            <!-- 这是包含表单的容器 -->  
            <div class="form-c">  
                <!-- 这是表单数据容器 -->  
                <div class="data-f">  
                    <!-- 这是用户名输入框 -->  
                    <div class="input">  
                        <!-- 这是用户名输入框的图标 -->  
                        <img class="input-p" src="../static/login/用户名.png" >  
                        <!-- 这是用户名输入框 -->  
                        <input class="input-t" type="text" placeholder="账号" v-model="username">  
                    </div>  
                    <!-- 这是密码输入框 -->  
                    <div class="input">   
                        <!-- 这是密码输入框的图标 -->  
                        <img class="input-p" src="../static/login/密码.png" >  
                        <!-- 这是密码输入框 -->  
                        <input class="input-t" type="password" placeholder="密码" v-model="password">  
                    </div>  
                    <!-- 这是邮箱输入框，仅在 tip 不等于 0 时显示 -->  
                    <div class="input" v-if="tip !== 0">  
                        <!-- 这是邮箱输入框的图标 -->  
                        <img class="input-p" src="../static/login/email.png" >  
                        <!-- 这是邮箱输入框 -->  
                        <input class="input-t" type="text" placeholder="邮箱" v-model="email">  
                    </div>  
                    <!-- 这是提示文本和切换提示的按钮 -->  
                    <div class="input">  
                        <!-- 这是提示文本 -->  
                        <div class="input-txt">{{ tips }}</div>  
                        <!-- 这是切换提示的按钮，点击时会触发 changetip 方法 -->  
                        <div class="input-txt1" @click="changetip">{{ tipr }}</div>  
                    </div>  
                    <!-- 这是提交按钮 -->  
                    <div class="input">  
                        <!-- 这是提交按钮 -->  
                        <button class="input-b" type="submit" @click="login">提交</button>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </div>  
</template>

<script setup>  
// 从vue导入ref，这是Vue 3的响应式数据方法，用于创建响应式数据  
import { ref } from 'vue';  
// 从vue-router导入useRouter，这是获取路由对象的方法  
import { useRouter } from 'vue-router';  
// 从axios导入axios，这是进行http请求的库  
import axios from 'axios';  
// 从element-plus导入ElMessage，这是Element UI的消息提示组件  
import { ElMessage } from 'element-plus'  
// 导入pinia状态管理
import { useStore } from '@/stores/counter';


const mystore = useStore()

// 使用useRouter获取路由对象并赋值给router  
const router = useRouter();  
  
// 使用ref创建响应式数据，初始值为0，表示当前是登录状态  
let tip = ref(0);  
// 初始提示信息为"还没有账号？"  
let tips = "还没有账号？";  
// 初始提示按钮的文字为"点我注册"  
let tipr = "点我注册";  
  
// 用户名、密码、邮箱的初始值都为空字符串  
let username = ""  
let password = ""  
let email = ""  
  
// 定义一个函数，用于显示成功的消息提示  
const open = (value) => {  
  ElMessage({  
    message: value,  
    type: 'success',  
  })  
}  
  
// 定义一个函数，用于显示错误的信息提示  
const open2 = (value) => {  
  ElMessage.error(value)  
}  
  
// 定义一个异步函数login，用于处理登录逻辑  
function login() {  
    // 如果tip的值为0，表示当前是登录状态  
    if(tip.value === 0){  
        // 如果用户名或密码为空，提示用户输入账号密码  
        if(username === "" || password === ""){  
            open2("请输入账号密码");  
        }else{  
            // 否则，发送POST请求到服务器进行登录操作，并处理返回结果  
            axios.post("http://localhost:8000/pet/login", {  
                "username": username,  
                "password": password  
                },{  
                    headers: {  
                        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'  
                        // 'Content-Type': 'application/json' 
                    }  
                }).then((res) => {  
                    // 如果返回的code为200，表示登录成功，显示成功消息并跳转到主页  
                    if(res.data.code === 200){  
                        open("登录成功") 
                        mystore.setTokenstring({
                            username:res.data.username,
                            token:res.data.token
                        })
                        const dataToStore = {
                            username:res.data.username,
                            token:res.data.token
                        };
                        sessionStorage.setItem('token', JSON.stringify(dataToStore));
                        router.push({path:'/'})  
                    }else{  
                        // 否则，显示错误消息  
                        open2("登录失败")  
                    }  
                })  
        }  
    }else{  
        // 如果tip的值不为0，表示当前是注册状态，发送POST请求到服务器进行注册操作，并处理返回结果  
        axios.post("http://localhost:8000/pet/register",{  
            username: username,  
            email: email,  
            password: password  
        },{  
            headers:{  
                "Content-Type":"application/x-www-form-urlencoded;charset=utf-8"  
            }  
        }).then(res=>{  
            // 如果返回的code为200，表示注册成功，显示成功消息  
            if(res.data.code === 200){  
                open("注册成功"); 
            }else{  
                // 否则，显示错误消息  
                open2(res.data.message);  
            }  
        })  
    }  
}  
  
// 定义一个函数changetip，用于切换登录和注册状态及提示信息  
function changetip(){  
    if(tip.value === 0){  
        tip.value = 1; // 切换到注册状态，并更新提示信息和按钮文字为相应的内容  
        tipr = "点我登录"; // 修改提示按钮的文字为"点我登录"  
        tips= "已有账号？"; // 修改提示信息为"已有账号？"  
    }else{ // 如果当前是注册状态，则切换到登录状态并更新提示信息和按钮文字为相应的内容  
        tip.value = 0; // 切换到登录状态，并更新提示信息和按钮文字为相应的内容  
        tipr = "点我注册"; // 修改提示按钮的文字为"点我注册"  
        tips = "还没有账号？"; // 修改提示信息为"还没有账号？"  
    }  
}  
</script>

<style scoped>
    .login{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: url(../static/login/BG.jpg);
        background-size: 100% 100%;
        display: flex;
        justify-content: space-evenly;
    }
    .cat{
        position: relative;
        z-index: 1;
        width: 400px;
        height: 600px;
        background-color: #ffffff;
        background: rgba(239,242,209, 0);
        margin-top: 50px;

    }
    .cat-pic{
        /* position: absolute; */
        width: 100%;
        height: 40%;
        background-color: rgb(255,249,237);
        z-index: 3;

    }
   .form-c{
        position: absolute;
        z-index: 2;
        margin-top: -81px;
        width: 100%;
        height: 60%;
        border-radius: 10px;
        background-color: rgb(239,242,209);
        display: flex;
        justify-content: space-evenly;
        backdrop-filter: blur(20px);
    }
    .data-f{
        width: 100%;
        height: 80%;
        display: flex;
        /* 设置为列向 */
        flex-direction: column;
        justify-content: space-evenly;
        margin-top: 20px;
        opacity: 0.8;
        padding: 10px;
    }
    .input{
        width: 100%;
        /* height: ; */
        display: flex;
        justify-content: space-between;
        padding: 10px;
    }
    .input-p{
        width: 10%;
        height: 40px;
        margin-left: 10px;
    }
    .input-txt{
        width: 40%;
        height: 40px;
        margin-left: 10px;
        color: #000;
        font-size: 18px;
        font-weight: 500;
    }
    .input-txt1{
        width: 20%;
        height: 40px;
        margin-right: 10px;
        color: #44ab67;
        font-size: 18px;
        font-weight: 500;
    }
    .input-txt1:hover{
        cursor: pointer;
    }
    .input-t{
        width: 90%;
        height: 40px;
        border-radius: 10px;
        background-color: #d2f2c0;
        margin-left: 10px;
        font-size: 18px;
        font-weight: 500;
    }
    .input-b{
        width: 90%;
        height: 40px;
        border-radius: 10px;
        background-color: #d2f2c0;
        margin-left: 20px;
        font-size: 18px;
        background: #249b53
    }
</style>